<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <LineDialog :dialogVisible.sync="dialogVisible" :info="info" @save="handleChange" />
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import {travelStrategyApi, travelStrategyDayApi, travelStrategyItemApi} from '@/feature/mj/infra/api/travelStrategyApi'
import CURDTable from '@/framework/components/table/CURDTable'
import {spotRecommendApi} from "@/feature/mj/infra/api/spotRecommendApi";
import StrategyTypeEnum from "@/feature/mj/infra/constants/StrategyTypeEnum";
import {travelStrategyTypeApi} from "@/feature/mj/infra/api/travelStrategyTypeApi";
import DateUtil from "@/framework/infra/util/DateUtil";
import LineDialog from '@/framework/components/StrategyLines/LineDialog.vue'
import ContentTypeEnum from "@/feature/cms/infra/constants/ContentTypeEnum";

export default {
  components: {CURDTable, LineDialog},
  data() {
    return {
      dialogVisible: false,
      info: {},
      option: {
        requestApi: travelStrategyApi,
        showSelection: false,
        loadDetail: true,
        columns: [
          {
            label: '标题',
            searchable: true,
            width: 'auto',
            required: true,
            prop: 'title'
          },
          {
            label: '攻略形式',
            prop: 'strategyType',
            required: true,
            type: ColumnType.RADIO,
            options: StrategyTypeEnum
          },
          {
            label: '攻略类型',
            required: true,
            prop: 'typeId',
            searchable: true,
            type: ColumnType.SELECT,
            options: travelStrategyTypeApi.listAll()
          },
          {
            label: '推荐官',
            prop: 'recommendId',
            required: true,
            searchable: true,
            type: ColumnType.SELECT,
            options: spotRecommendApi.listAll()
          },
          {
            label: '按钮内容',
            hiddenInTable: true,
            required: false,
            width: 120,
            prop: 'buttonText',
            type: ColumnType.TEXT
          }, {
            label: '按钮链接',
            hiddenInTable: false,
            viewAsLink: true,
            required: false,
            width: 160,
            prop: 'buttonLink',
            type: ColumnType.LINK
          },
          {
            label: '封面',
            required: true,
            span: 24,
            prop: 'cover',
            type: ColumnType.IMAGE
          },

          // {
          //   label: '首推景点',
          //   required: true,
          //   prop: 'scenicSpotId',
          //   type: ColumnType.SELECT
          // },
          {
            label: '发布日期',
            required: true,
            prop: 'publishDate',
            type: ColumnType.DATE,
            defaultValue: DateUtil.currentDate()
          },
          {
            label: '图片',
            span: 24,
            required: true,
            hiddenInTable: true,
            type: ColumnType.IMAGE,
            limit: 20,
            prop: 'photoList',
            dataType: 'array'
          },
          // {
          //   label: '视频',
          //   span: 24,
          //   hiddenInTable: true,
          //   // required: true,
          //   type: ColumnType.IMAGE,
          //   showFilter: ({value}) => value.strategyType === StrategyTypeEnum.enum_1.id,
          //   limit: 10,
          //   prop: 'videoList',
          //   dataType: 'array'
          // },
          {
            label: '内容',
            required: true,
            span: 24,
            hiddenInTable: true,
            prop: 'content',
            type: ColumnType.RICH_EDITOR
          },
          {
            label: '发布IP',
            required: true,
            prop: 'publishIp'
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          },
          // {
          //   label: '路线规划',
          //   required: false,
          //   hiddenInTable: true,
          //   prop: 'strategyLines',
          //   type: ColumnType.BUTTON_LINE,
          // },
        ]
      }
    }
  },
  methods: {
    handleGoodsManager({arg: row}) {
      this.info = row
      this.dialogVisible = true
    },
    handleChange(e, strategyLines) {
      console.log('e', e, strategyLines)
      const oldIds = strategyLines?.map(v => v.id) || []
      const newIds = e.map(v => v.id)
      // 判断是否是新增
      e.forEach(async(v, i) => {
        const oldData = strategyLines?.find(c => c.id === v.id)
        // 新增
        if (!v.id) {
          await travelStrategyDayApi.create({ day: v.day, strategyId: this.info.id})
        } else {
          if(JSON.stringify({ id: oldData.id, day: oldData.day, strategyId: oldData.strategyId }) !== JSON.stringify({ id: v.id, day: v.day, strategyId: v.strategyId })){
             // 修改
            await travelStrategyDayApi.update({ id: v.id, day: v.day, strategyId: this.info.id})
          }
          // 删除
          const itemIds = oldData?.items?.map(c => c.itemId) || []
          const newItemIds = v.items.map(c => c.itemId)
          console.log('itemIds', itemIds, newItemIds, itemIds.filter(c =>!newItemIds.includes(c)))
          itemIds.filter(c =>!newItemIds.includes(c)).forEach(c => {
            travelStrategyItemApi.remove(c)
          })
        }
        v.items?.forEach(k => {
          if (!k.itemId) {
            travelStrategyItemApi.create({ ...k })
          } else {
            const oldItem = oldData?.items.find(c => c.itemId === k.itemId)
            if (JSON.stringify({...oldItem })!== JSON.stringify({...k })){
              travelStrategyItemApi.update({ ...k })
            }
          }
        })
      });
      oldIds.filter(c =>!newIds.includes(c)).forEach(async(c) => {
        const items = strategyLines?.find(v => v.id === c)?.items || {}
        if(items.length) {
          const promiseArr = []
          items.forEach(k => {
            promiseArr.push(travelStrategyItemApi.remove(k.itemId))
          })
          await Promise.all(promiseArr)
          travelStrategyDayApi.remove(c)
        } else {
          travelStrategyDayApi.remove(c)
        }
      })
    }
  }
}
</script>

